<template>
	<view class="stopwatch-container">
		<!-- 控制按钮 -->
		<view class="control-buttons">
			<!-- 开始 -->
			<!-- <view class="button main-button" :style="{ backgroundColor: isRunning ? '#ff3b30' : '#34c759' }" -->
			<view :class="getDynamicClass(buttonText)" @click="toggle">
				<text class="button-text">{{ buttonText }}</text>
			</view>

			<!-- 时间显示 -->
			<view class="time-display">
				<text class="time-text">{{ formattedTime }}</text>
			</view>
			<!-- 复位 -->
			<!-- 			<view class="button reset-button" :style="{ backgroundColor: isRunning ? '#ffd21a' : '#ffd21a' }"
				@click="reset">
				<text class="button-text" :style="{ color: isRunning ? '#000000' : '#000000' }">重测</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: 'AppleStopwatchLight',
		data() {
			return {
				isRunning: false,
				startTime: 0,
				elapsedTime: 0,
				timer: null,
			}
		},
		computed: {
			formattedTime() {
				const seconds = this.elapsedTime / 1000
				return seconds.toFixed(1)
			},
			buttonText() {
				if (!this.isRunning && this.elapsedTime === 0) {
					return '启动'
				} else if (!this.isRunning && this.elapsedTime > 0) {
					return '复位'
				} else {
					return '停止'
				}
			}
		},
		methods: {
			// 修改样式
			getDynamicClass(type) {
				const classMap = {
					warning: 'warning-class',
					danger: 'danger-class',
					success: 'success-class'
				}
				if (type == '启动') {
					return "warning-class"
				} else if (type == '停止') {
					return "danger-class"
				} else {
					return "success-class"
				}

			},
			toggle() {
				if (this.isRunning) {
					this.pause()
					this.$emit('watchTime', this.formattedTime)
				} else {
					if (this.elapsedTime == 0) {
						// 启动
						this.start()
					} else {
						// 复位
						this.reset()
						// 启动
						// this.start()
					}

				}
			},
			start() {
				if (!this.isRunning) {
					this.startTime = Date.now() - this.elapsedTime
					this.isRunning = true
					this.timer = setInterval(this.updateTime, 100)
				}
			},
			pause() {
				if (this.isRunning) {
					clearInterval(this.timer)
					this.isRunning = false
				}
			},
			reset() {
				clearInterval(this.timer)
				this.isRunning = false
				this.elapsedTime = 0
				this.$emit('resetTime')
				// 启动
				// this.toggle()
			},
			updateTime() {
				this.elapsedTime = Date.now() - this.startTime
			}
		},
		beforeDestroy() {
			clearInterval(this.timer)
		}
	}
</script>

<style scoped>
	.warning-class {
		width: 280rpx;
		font-size: 60rpx;
		margin-left: 15rpx;
		text-align: center;
		line-height: 160rpx;
		border-radius: 30rpx;
		background-color: #34c759;
		color: #ffffff;
	}

	.danger-class {
		width: 280rpx;
		font-size: 60rpx;
		margin-left: 15rpx;
		text-align: center;
		line-height: 160rpx;
		border-radius: 30rpx;
		background-color: #ff3b30;
		color: #ffffff;
	}

	.success-class {
		width: 280rpx;
		font-size: 60rpx;
		margin-left: 15rpx;
		text-align: center;
		line-height: 160rpx;
		border-radius: 30rpx;
		background-color: #ffaa00;
		color: #ffffff;
	}

	.stopwatch-container {
		display: flex;
		/* flex-direction: column; */
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
		border-radius: 40rpx;
		/* padding: 20rpx; */
		/* box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05); */
	}

	.time-display {
		width: 400rpx;
		text-align: center;
		margin-bottom: 20rpx;
		/* background-color: #34c759; */
	}

	.time-text {
		font-size: 120rpx;
		font-weight: 300;
		font-family: 'Helvetica Neue', sans-serif;
		color: #333;
		letter-spacing: -2rpx;
	}

	.control-buttons {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.button {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s ease;
	}

	.main-button {
		background-color: #34c759;
	}

	.reset-button {
		background-color: #f0f0f0;
	}

	.button-text {
		font-family: 'Helvetica Neue', sans-serif;
	}

	.reset-button .button-text {
		color: #666;
	}
</style>